// 设置支出统计柱状图样式
function setData(costPrice, costType) {

    let overheadBar = echarts.init(document.getElementById('overheadBar'))


    // 图表配置项
    let overheadBarOption = {

        // 标题显示样式
        title: {
            show: true,
            text: "支出统计",
            left: '20px',
            top: "20px",
            textStyle: {
                color: "#fff",
                fontWeight: "bolder",
                fontFamily: "Microsoft YaHei",
                fontSize: 30,
            },
        },

        // 设置x轴坐标的显示样式
        xAxis: {
            type: "category",
            name: "支出类别",
            data: costType,
            axisLabel: {
                fontSize: 20,
                color: "#fff",
                fontWeight: "bolder",
            }
        },

        // y轴样式
        yAxis: {
            show: false,
            type: "value",
            name: "支出金额",
            axisLabel: {
                fontSize: 20,
                fontWeight: "bolder",
                color: "#fff",
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10, // 设置阴影的模糊度
                shadowOffsetY: 5 // 设置阴影的垂直偏移量
            },
            splitLine: {
                show: false //去除图表横线
            }

        },

        // 数据样式
        series: {
            type: "bar",
            data: costPrice,
            // 条形图样式
            itemStyle: {
                color: "#e3c191",
            },
            label: {
                fontSize: 20,
                color: "#000"
            }
        },

        // 显示内容label
        label: {
            show: true,
            formatter: "{@支出类别}",
            position: "inside",
            textStyle: {
                color: "#fff",
            }
        },
    };

    // 使得设置生效
    overheadBar.setOption(overheadBarOption)

    // 设置窗口自适应变化
    window.onresize = function () {
        overheadBar.resize()
    }
}